<template>
  <div class="create-wrapper">
    <div class="filter-container">
      <el-button
        type="primary"
        icon="CirclePlus"
        @click="handleAdd(submitForm)"
        :loading="loading"
        >新建会议
      </el-button>
      <el-select
        v-model="query.type_id"
        placeholder="Select"
        style="width: 240px"
        @change="handleSeach"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-table
      class="header-lighter"
      :data="tableData"
      stripe
      highlight-current-row
      show-overflow-tooltip
      fit
      v-loading="loading"
      height="580px"
    >
      <el-table-column label="会议名称" min-width="200" prop="name" />
      <el-table-column label="记录人" min-width="120" prop="recorder" />
      <el-table-column label="会议时间" min-width="180" prop="">
        <template #default="scope">
          {{
            scope.row.meeting_start
              ? scope.row.meeting_start.replace('T', ' ')
              : ''
          }}
          ~
          {{
            scope.row.meeting_end ? scope.row.meeting_end.replace('T', ' ') : ''
          }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="120" prop="create_at">
        <template #default="scope">
          {{ scope.row.create_at ? scope.row.create_at.replace('T', ' ') : '' }}
        </template>
      </el-table-column>
      <el-table-column
        label="音频解析状态"
        align="center"
        min-width="120"
        prop="create_at"
      >
        <template #default="scope">
          <el-tag
            type="primary"
            v-if="scope.row.is_complete == radioEnum.inLine"
            >{{ radioEnumMap[radioEnum.inLine] }}</el-tag
          >
          <el-tag
            type="success"
            v-if="scope.row.is_complete == radioEnum.completed"
            >{{ radioEnumMap[radioEnum.completed] }}</el-tag
          >
          <el-tag
            type="warning"
            v-if="scope.row.is_complete == radioEnum.processing"
            >{{ radioEnumMap[radioEnum.processing] }}</el-tag
          >
          <el-tag
            type="danger"
            v-if="scope.row.is_complete == radioEnum.failure"
            >{{ radioEnumMap[radioEnum.failure] }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column width="260" fixed="right" label="操作">
        <template #default="scope">
          <el-space>
            <el-icon
              style="color: var(--el-color-primary); cursor: pointer"
              @click="handleDetail(scope.row)"
              size="20"
            >
              <Search />
            </el-icon>
            <el-icon
              style="color: var(--el-color-primary); cursor: pointer"
              @click="handleToAI(scope.row)"
              size="20"
            >
              <Document />
            </el-icon>
            <template
              v-if="
                scope.row.creator &&
                scope.row.creator.includes(info.user_info_id)
              "
            >
              <el-icon
                style="color: var(--el-color-primary); cursor: pointer"
                @click="handleUpdate(scope.row)"
                size="20"
                ><Edit
              /></el-icon>
              <el-icon
                style="color: var(--el-color-danger); cursor: pointer"
                @click="handleDelete(scope.row.id)"
                size="20"
              >
                <Delete />
              </el-icon>
            </template>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="dataTotal"
      v-model:limit="query.limit"
      v-model:page="query.page"
      @pagination="getTableData"
    />
    <Drawer ref="drawerRef" v-model="detailVisible"></Drawer>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from 'vue'
import { radioEnum, radioEnumMap } from '@/enum/radio.js'
import Drawer from './detail.vue'
import { httpMeetingList, httpdeleteMeeting } from '@/api/meeting.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/user.js'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { info } = storeToRefs(userStore)
const router = useRouter()
// 查询需要的变量
const tableData = ref([{ avatar: '' }])
const dataTotal = ref(0)

const options = ref([
  {
    value: 1,
    label: '我创建的',
  },
  {
    value: 2,
    label: '我参与的',
  },
])
// const type_id = 1 // 1:我创建的 2:我参与的
const query = reactive({
  page: 1,
  limit: 20,
  type_id: 1,
})
const loading = ref(false)
const submitForm = ref()
const detailVisible = ref(false)
const drawerRef = ref()
const getTableData = async () => {
  loading.value = true
  const response = await httpMeetingList({
    ...query,
  })
    .catch(() => null)
    .finally(() => {
      loading.value = false
    })

  if (!response) {
    return
  }
  tableData.value = response.list
  dataTotal.value = response.total
}
const handleSeach = () => {
  query.page = 1
  getTableData()
}
// 新增记录
const handleAdd = async (formEl) => {
  router.push('/meeting/add')
}
const handleDetail = (row) => {
  drawerRef.value.initData(row.id)
  detailVisible.value = true
}
const handleUpdate = (row) => {
  // TODO:参与者智能查看不能编辑
  router.push({
    path: `/meeting/edit/${row.id}`,
  })
}
const handleToAI = (row) => {
  router.push(`/meeting/ai/${row.id}`)
}

const handleDelete = async (id) => {
  const confirm = await ElMessageBox.confirm('确认删除此项？')
    .then(() => true)
    .catch(() => false)
  if (!confirm) return
  loading.value = true
  const response = await httpdeleteMeeting({ meeting_id: id })
    .then(() => true)
    .catch(() => false)
  if (response) {
    await getTableData()
  } else {
    loading.value = false
  }
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.create-wrapper {
  height: 100%;
}
.filter-container {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-lighter {
  height: calc(100% - 60px);
}
</style>
